<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryInfoForm" v-show="showSearch" :inline="true" label-width="68px">
            <el-form-item label="创建时间" style="width: 308px">
                <el-date-picker
                        v-model="queryDateRange"
                        value-format="YYYY-MM-DD"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQueryInfo">搜索</el-button>
                <el-button icon="Refresh" @click="resetQueryInfo">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                        type="danger"
                        plain
                        icon="Delete"
                        :disabled="multiple"
                        @click="handleDeleteInfos"
                >删除</el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getInfoList"></right-toolbar>
        </el-row>

        <!-- 表格数据 -->
        <el-table v-loading="loading" :data="weatherInfoList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column
                    label="序号"
                    type="index"
                    width="50"
                    align="center">
                <template #default="scope">
                    {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
                </template>
            </el-table-column>
            <!--            <el-table-column label="结果编号" prop="cnId"/>-->

            <el-table-column label="云图" align="center">
                <template #default="scope">
                    <img :src="scope.row.imgData"/>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-tooltip content="删除" placement="top">
                        <el-button link type="primary" icon="Delete" @click="handleDeleteInfo(scope.row)" ></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>

        <pagination
                v-show="weatherInfoTotal > 0"
                :total="weatherInfoTotal"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getInfoList"
        />
    </div>
</template>

<script>
import {
    delWeatherInfo,
    listWeatherInfo
} from "@/api/signal/weatherInfo";
import {getCurrentInstance} from "vue";
import {addDateRange, parseTime} from "@/utils/ruoyi";
import RateView from "@/components/rateView/index.vue";
import {readFileData,readImgData} from "@/api/signal/fileData";

export default {
    name:'Weatherinfo',
    components: {RateView},
    props: [],
    data() {
        return {
            weatherInfoList:[],
            ids:[],
            multiple:true,//选中任务
            loading:false,
            weatherInfoTotal:0,
            showSearch:true,
            queryDateRange: [],
            queryParams:{
                pageNum: 1,
                pageSize: 10,
                disposeStatus:"0"
            },
            rules: {

            }
        }
    },
    computed: {},
    watch: {},
    created() {

    },
    mounted() {
        this.handleQueryInfo()
    },
    methods: {
        parseTime,
        getInfoList(){
            this.loading = true
            listWeatherInfo(addDateRange(this.queryParams, this.queryDateRange)).then(response => {
                this.weatherInfoList = response.rows
                for (let i=0;i<this.weatherInfoList.length;i++){
                    this.getImgData(i)
                }
                this.weatherInfoTotal = response.total
                this.loading = false
            })
        },
        getImgData(index){
            readImgData(this.weatherInfoList[index].imgData).then(response => {
                this.weatherInfoList[index].imgData = "data:image/png;base64,"+response.img;
            })
        },
        handleQueryInfo() {
            this.queryParams.pageNum = 1
            this.getInfoList()
        },
        resetQueryInfo() {
            this.queryDateRange = []
            this.$refs['queryInfoForm'].resetFields()
            this.handleQueryInfo()
        },
        handleSelectionChange(selection){
            this.ids = selection.map(item => item.cnId);
            this.multiple = !selection.length
        },
        handleDeleteInfos(){
            let that = this
            this.$modal.confirm('是否确认删除编号为"' + this.ids + '"的数据项？').then(function () {
                delWeatherInfo(this.ids).then(response => {
                    that.$modal.msgSuccess(response.msg)
                    that.getInfoList()
                })
            }).catch(function () {

            })
        },
        handleDeleteInfo(row){
            const that = this
            let idList = []
            idList.push(row.cnId);
            this.$modal.confirm('是否确认删除编号为"' + idList + '"的数据项？').then(function () {
                delWeatherInfo(idList).then(response => {
                    that.$modal.msgSuccess(response.msg)
                    that.getInfoList()
                })
            }).catch(function () {

            })
        },
    }
}
</script>

<style scoped>

</style>